<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
            <cp1> 
                <span >123</span>

                <!-- slot 和 slot-scope 在vue2的版本当中 是已经废弃但是没有移除的api(vue3当中移除了) -->
                <!-- 如果 给一个元素设置了 slot属性 意思是指定这个内容出现在组件内部 指定的name的插槽当中 -->
                <span slot="b">456</span>
                <!-- slot-scope 方便我们获取 配置在 子组件内部的对应的slot插槽上 除了name以外的属性的传递 -->
                <span slot="a"  slot-scope="val">780 {{ val }} </span>

                <!--  v-slot 只能使用在 template  或者是 组件上使用-->
                <!-- 
                    v-slot:c="val"   =>  slot="c" slot-scope="val"
                    #c="val"   <=>   v-slot:c="val"
                    ( v-bind => :   |   v-on =>  @    |  v-slot => # )
                 -->
                <template v-slot:c="val" >9999 {{ val }}</template>


            </cp1>
            <cp2>
                <div slot="cac"  slot-scope="kolVal">这是一个具名插槽/命名插槽 , {{ haho }} 
                    <div ref="ggboli" v-if="kopBlo ">{{ kolVal }}</div>
                </div>
            </cp2>
            <button @click="filo">点击获取ggboli</button>
            <div>{{ kop.kio }}</div>
            <div>{{ kop.arg }}</div>
            <div>{{ kop.ggbos }} 111</div>
            <button @click="ffik">点击进行传值</button>
            <!-- <span ref="d">1111111111</span>
            <button @click="fn1">点击获取</button> -->
            <div>{{ numb.name }}</div>
            <div>{{ numb.sex }}</div>
            <div>{{  numb.maxNum  }}</div>
            <button @click="fn20">numb强制进行视图更新{{ numb.maxNum }}</button>
            <button @click="fn30">set更新视图{{ numb.maxNum  }}</button>
            <button @click="fn50">set更新视图{{ numb.maxNum  }}</button>
            <button  @click="fn40">点击++</button>
    </div>

        
    
    <script>
        

        Vue.component('cp1',{
            template:`
                <div>
                    <!-- 如果有name属性设置的插槽  叫做具名插槽/命名插槽 -->
                    <slot name="b"></slot>
                    <div> 我是cp1组件</div>
                    <slot name="a"  a="1" :b="2"  ></slot>
                    <hr />
                    <!-- slot的 name的默认值是 default -->
                    <slot name="default"></slot> 
                    <hr />
                    <slot name="c" k="1" f="2" c="3"></slot> 
                </div>
            `
        })

        Vue.component('cp2',{
            template:`
                <div>
                    <hr />
                    <span  ref="nan">cp2当中=></span>
                    <slot name="cac" :ggb="gogobo" :bam="babama" :otm="otuman"></slot>
                    <button @click="myis">点击获取插槽的数值</button>
                </div>
            `,
            data(){
                return {
                    gogobo:"猪猪侠",
                    babama:"百特曼",
                    otuman:"凹凸侠"
                }
            },
            methods:{
                    myis(){
                    // console.log()
                    // console.log( this.$refs.djkl)
                    // console.log(this.$refs.nan)
                },
                fn1(){
                    // console.log( this.$refs.djkl)
                    // console.log( this.$refs.d)
                }
            }
        })
    
        const app = new Vue({
            el: '#app',
            data:{
                haho:"++父组件可以通过，插槽进行组件通信++",
                kop:{
                    kio:"你爸爸的",
                    arg:18,
                },
                kopBlo:true,
                numb:{
                    name:"jojo",
                    sex:"18"
                }
            },
            methods:{
                filo(){
                    // console.log(this.$refs.ggboli.innerText)

                    if (this.$refs.ggboli.innerText) {
                    // console.log(this.$refs.ggboli.innerText)
                        this.kop = this.$refs.ggboli.innerText
                        kopBlo = false
                        return
                    }else{
                        this.kopBlo = false
                        console.log('11111')
                        return
                    }

                   
                },
                 ffik(){
                    //    console.log("打了" ,this.kop)
                    // this.$nextTick(function () {
                    //    this.kop.ggbos = "牛逼！"
                    //    console.log("打印了" ,this.kop)
                    // });
                    console.log("打了" ,this.kop)
                    //  this.$nextTick();
                    // this.kop.ggbos = "牛逼！"
                    console.log("打印了" ,this.kop)
                    this.$set(this.kop,'ggbos',"牛逼！")
                    this.$forceUpdate();
                },
                fn20(){
                    this.numb.maxNum = 10
                    console.log("添加且强制视图更新了",this.numb.maxNum)
                    
                    // this.$forceUpdate(); 不能使用在需要频繁更新的视图上，用了视图就直接锁死，会强制锁定在第一次强制更新视图的数据，会导致数据会更新，视图不会继续更新，除非再次进行强制更新视图，继续锁死新的数据
                    this.$forceUpdate();
                },
                fn30(){
                    this.$set(this.numb,'maxNum',1000)
                    console.log("添加且视图更新了",this.numb.maxNum)

                },
                fn40(){
                    this.numb.maxNum+=100
                    console.log('查看maxNum',  this.numb.maxNum)
                },
                fn50(){
                    this.numb.maxNum = 10086
                    console.log("添加且视图更新了",this.numb.maxNum)
                    this.$forceUpdate();
                },
            }
        })

    </script>

</body>
</html>